<template>
  <div class="enhanced-score-table">
    <el-table
      :data="data"
      :loading="loading"
      stripe
      border
      style="width: 100%"
      @selection-change="handleSelectionChange"
      empty-text="暂无数据"
    >
      <el-table-column type="selection" width="55" align="center" />

      <el-table-column label="排名" width="80" align="center">
        <template #default="{ row }">
          <div class="ranking-badge" :class="getRankingClass(row.rank)">
            <span v-if="row.rank <= 3" class="medal-icon">{{ getMedalIcon(row.rank) }}</span>
            <span v-else class="rank-number">{{ row.rank || '-' }}</span>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="项目信息" min-width="180">
        <template #default="{ row }">
          <div class="project-info">
            <div class="project-name">{{ row.project?.name || '-' }}</div>
            <div class="project-type">{{ row.project?.type || '-' }} · {{ getRoundText(row.round) }}</div>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="学生信息" min-width="160">
        <template #default="{ row }">
          <div class="student-info">
            <div class="student-name">{{ row.student?.name || '-' }}</div>
            <div class="student-details">
              {{ row.student?.studentNumber || '-' }} · {{ row.student?.department || '-' }}
            </div>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="成绩" width="120" align="center">
        <template #default="{ row }">
          <div class="score-display">
            <span class="score-value" :class="{ 'record-breaking': row.isRecord }">
              {{ row.score || '-' }}
            </span>
            <span class="score-unit">{{ row.unit || '' }}</span>
            <el-tag v-if="row.isRecord" type="danger" size="small" class="record-tag">
              破纪录
            </el-tag>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="状态" width="100" align="center">
        <template #default="{ row }">
          <el-tag :type="getStatusType(row.status)" size="small">
            {{ getStatusText(row.status) }}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column label="提交时间" width="160" align="center">
        <template #default="{ row }">
          {{ formatDateTime(row.createTime) }}
        </template>
      </el-table-column>

      <el-table-column label="操作" width="200" align="center" fixed="right">
        <template #default="{ row }">
          <el-button-group size="small">
            <el-button type="primary" @click="handleViewDetail(row)">
              <el-icon><View /></el-icon>
            </el-button>
            <el-button type="success" @click="handleViewRanking(row)">
              <el-icon><Trophy /></el-icon>
            </el-button>
            <el-button type="warning" @click="handleGenerateCertificate(row)">
              <el-icon><Document /></el-icon>
            </el-button>
            <el-button type="info" @click="handleShare(row)">
              <el-icon><Share /></el-icon>
            </el-button>

            <!-- 审核相关操作 -->
            <template v-if="row.status === 'PENDING'">
              <el-button type="success" @click="handleApprove(row)">
                <el-icon><Select /></el-icon>
              </el-button>
              <el-button type="danger" @click="handleReject(row)">
                <el-icon><Close /></el-icon>
              </el-button>
            </template>

            <template v-if="row.status === 'PENDING' || row.status === 'DISPUTED'">
              <el-button type="primary" @click="handlePublish(row)">
                <el-icon><Check /></el-icon>
              </el-button>
            </template>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import {
  View, Trophy, Document, Share, Select, Close, Check
} from '@element-plus/icons-vue'

// 组件属性
defineProps({
  data: {
    type: Array,
    default: () => []
  },
  loading: {
    type: Boolean,
    default: false
  },
  selectedScores: { // eslint-disable-line no-unused-vars
    type: Array,
    default: () => []
  }
})

// 组件事件
const emit = defineEmits([
  'selection-change',
  'view-detail',
  'view-ranking',
  'generate-certificate',
  'share',
  'approve',
  'reject',
  'publish'
])

// 获取排名样式类
const getRankingClass = (rank) => {
  if (rank === 1) return 'gold'
  if (rank === 2) return 'silver'
  if (rank === 3) return 'bronze'
  return ''
}

// 获取奖牌图标
const getMedalIcon = (rank) => {
  if (rank === 1) return '🥇'
  if (rank === 2) return '🥈'
  if (rank === 3) return '🥉'
  return ''
}

// 获取轮次文本
const getRoundText = (round) => {
  const roundMap = {
    1: '第1轮',
    2: '第2轮',
    3: '第3轮',
    4: '决赛'
  }
  return roundMap[round] || '-'
}

// 获取状态类型
const getStatusType = (status) => {
  const typeMap = {
    'PENDING': 'warning',
    'PUBLISHED': 'success',
    'REJECTED': 'danger',
    'DISPUTED': 'info'
  }
  return typeMap[status] || ''
}

// 获取状态文本
const getStatusText = (status) => {
  const textMap = {
    'PENDING': '待审核',
    'PUBLISHED': '已公示',
    'REJECTED': '已驳回',
    'DISPUTED': '有异议'
  }
  return textMap[status] || '-'
}

// 格式化日期时间
const formatDateTime = (dateTime) => {
  if (!dateTime) return '-'
  const date = new Date(dateTime)
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  })
}

// 处理选择变化
const handleSelectionChange = (selection) => {
  emit('selection-change', selection)
}

// 查看详情
const handleViewDetail = (row) => {
  emit('view-detail', row)
}

// 查看排名
const handleViewRanking = (row) => {
  emit('view-ranking', row)
}

// 生成证书
const handleGenerateCertificate = (row) => {
  emit('generate-certificate', row)
}

// 分享成绩
const handleShare = (row) => {
  emit('share', row)
}

// 审核通过
const handleApprove = (row) => {
  emit('approve', row)
}

// 驳回
const handleReject = (row) => {
  emit('reject', row)
}

// 公示
const handlePublish = (row) => {
  emit('publish', row)
}
</script>

<style scoped>
.enhanced-score-table {
  width: 100%;
}

/* 排名样式 */
.ranking-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-weight: bold;
}

.ranking-badge.gold {
  background: linear-gradient(135deg, #ffd700, #ffed4e);
  color: #b8860b;
  box-shadow: 0 2px 8px rgba(255, 215, 0, 0.3);
}

.ranking-badge.silver {
  background: linear-gradient(135deg, #c0c0c0, #e8e8e8);
  color: #696969;
  box-shadow: 0 2px 8px rgba(192, 192, 192, 0.3);
}

.ranking-badge.bronze {
  background: linear-gradient(135deg, #cd7f32, #e4a853);
  color: #8b4513;
  box-shadow: 0 2px 8px rgba(205, 127, 50, 0.3);
}

.medal-icon {
  font-size: 18px;
}

.rank-number {
  font-size: 14px;
  color: #666;
}

/* 项目信息样式 */
.project-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.project-name {
  font-weight: 500;
  color: #2c3e50;
}

.project-type {
  font-size: 12px;
  color: #7f8c8d;
}

/* 学生信息样式 */
.student-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.student-name {
  font-weight: 500;
  color: #2c3e50;
}

.student-details {
  font-size: 12px;
  color: #7f8c8d;
}

/* 成绩显示样式 */
.score-display {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-wrap: wrap;
}

.score-value {
  font-weight: bold;
  font-size: 16px;
  color: #2c3e50;
}

.score-value.record-breaking {
  color: #e74c3c;
  animation: pulse 1.5s infinite;
}

.score-unit {
  font-size: 12px;
  color: #7f8c8d;
}

.record-tag {
  margin-left: 4px;
}

/* 动画效果 */
@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .el-table {
    font-size: 12px;
  }

  .project-name,
  .student-name {
    font-size: 12px;
  }

  .score-value {
    font-size: 14px;
  }
}
</style>